{{define "login"}}
<div class="form-container">
    <h2>用户登录</h2>

    {{if .Error}}
    <div class="alert error">{{.Error}}</div>
    {{end}}

    <form id="loginForm" class="login-form">
        <!-- 隐藏字段：传递跳转地址 -->
        <input type="hidden" name="redirect" value="{{.Redirect}}">

        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>
        </div>

        <!-- 密码输入框（带小眼睛切换） -->
        <div class="form-group" style="position: relative;">
            <label for="password">密码</label>
            <input
                    type="password"
                    id="password"
                    name="password"
                    required
                    style="padding-right: 38px; height: 36px; border: 1px solid #ddd; border-radius: 4px;"
            >
            <!-- 小眼睛切换按钮 -->
            <button
                    type="button"
                    id="togglePwd"
                    style="
                    position: absolute;
                    right: 10px;
                    top: 54px;  <!-- 精确垂直居中（根据输入框高度调整） -->
                    border: none;
                    background: transparent;
                    cursor: pointer;
                    font-size: 18px;
                    padding: 0;
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #666;
                "
            >
                <span id="pwdIcon">🔒</span> <!-- 初始图标：锁定/闭眼 -->
            </button>
        </div>

        <button type="submit" class="btn">登录</button>
    </form>
    <p>还没有账号？<a href="/auth/registerPage">立即注册</a></p>
</div>

<script>
    // 密码显示/隐藏切换功能
    const passwordInput = document.getElementById('password');
    const toggleBtn = document.getElementById('togglePwd');
    const pwdIcon = document.getElementById('pwdIcon');

    toggleBtn.addEventListener('click', function() {
        // 切换输入框类型（password ↔ text）
        const isHidden = passwordInput.type === 'password';
        passwordInput.type = isHidden ? 'text' : 'password';

        // 切换图标（🔒锁定 → 🔓解锁）
        pwdIcon.textContent = isHidden ? '🔓' : '🔒';
    });

    // 拦截表单提交，使用AJAX异步请求
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交

        // 显示加载状态
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="btn-loading">登录中...</span>';

        // 收集表单数据
        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        // 异步调用登录接口
        fetch('/auth/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(result => {
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.innerHTML = '登录';

                if (result.code === '00000') { // 假设成功状态码为00000
                    // 登录成功，跳转到指定页面
                    window.location.href = result.redirect || '/url/list';
                } else {
                    // 显示错误信息（先移除旧错误）
                    const oldError = this.querySelector('.alert.error');
                    if (oldError) oldError.remove();

                    const errorEl = document.createElement('div');
                    errorEl.className = 'alert error';
                    errorEl.textContent = result.message || '登录失败，请重试';
                    this.insertBefore(errorEl, this.firstChild);
                }
            })
            .catch(error => {
                // 网络错误处理
                submitBtn.disabled = false;
                submitBtn.innerHTML = '登录';

                const oldError = this.querySelector('.alert.error');
                if (oldError) oldError.remove();

                const errorEl = document.createElement('div');
                errorEl.className = 'alert error';
                errorEl.textContent = '网络错误，请检查连接';
                this.insertBefore(errorEl, this.firstChild);
            });
    });
</script>
{{end}}

{{template "base.html" .}}